import React, { useEffect, useState } from 'react'
import { Table, Space, Button, Modal, message, Switch } from 'antd'
import { DeleteTwoTone, EditTwoTone, ExclamationCircleFilled } from '@ant-design/icons';
import EditCategories from '../../../components/mews/EditCategories';
import DetailCategories from '../../../components/mews/DetailCategories';
import CreateCategories from '../../../components/mews/CreateCategories';
import axios from 'axios';




export default function UserList() {
    const { confirm } = Modal;
    const [loading, setLoading] = useState(false)
    const [list, setList] = useState([])
    const [createOpen, setCreateOpen] = useState(false);
    const [detailOpen, setDetailOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [currentListId, setCurrentListId] = useState()
    const [currentData, setCurrentData] = useState()


    useEffect(() => {
        setLoading(true)
        axios.get("http://192.168.2.3:3000/categories")
            .then(res => {
                setList(res.data)
                setLoading(false)
            })
        return () => { }
    }, []
    )

    const showDeleteConfirm = (record) => {
        confirm({
            title: '删除',
            icon: <ExclamationCircleFilled />,
            content: '你确定要删除吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                console.log("record.default", record.default)
                if (!record.default) {
                    setLoading(true)
                    deleteAndGet(record.id);
                    console.log('OK');
                } else {
                    message.info("默认用户不能删除！")
                }

            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    async function deleteAndGet(id) {
        try {
            await axios.delete(`http://192.168.2.3:3000/categories/${id}`)
                .then(res => {
                    if (res.status === 200) {
                        message.info("删除成功！")
                    } else {
                        message.error("删除失败！")
                    }
                })
            const get = await axios.get("http://192.168.2.3:3000/categories");
            const getRes = get.data;
            console.log("getRes", getRes)
            setList(getRes)
            setLoading(false)
        } catch (error) {
            console.error(error);
        }
    }
    const editClick = (data) => {
        console.log("editClick", data)
        setCurrentListId(data.id)
        setEditOpen(true)

    };
    const createClick = () => {
        console.log("createClick")
        setCreateOpen(true)

    };
    const detailClick = (data) => {
        console.log("detailClick", data)
        setCurrentData(data)
        setDetailOpen(true)
    };


    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: (text, record) => (
                <a href="#" onClick={(e) => { e.preventDefault(); detailClick(record); }}>{text}</a>
            ),
        },
        {
            title: '分类标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '分类内容',
            dataIndex: 'value',
            key: 'value',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button
                        danger
                        type='primary'
                        shape="circle"
                        onClick={() => showDeleteConfirm(record)}
                        icon={<DeleteTwoTone twoToneColor="#ffffff" />} />
                    <Button
                        type='primary'
                        shape="circle"
                        icon={<EditTwoTone twoToneColor="#ffffff" />}
                        onClick={() => editClick(record)}
                    />

                </Space >
            ),
        },
    ];
    return (
        <div>
            <div style={{
                "float": "right",
                "margin": "8px"
            }}>
                <Button
                    type="primary"
                    size='large'
                    onClick={() => {
                        createClick();
                    }}>
                    新建
                </Button>
            </div>
            <Table
                rowKey={(list) => list.id}
                columns={columns}
                pagination={false}
                dataSource={list}
                loading={loading}
                locale={{ emptyText: "这里没数据，别瞅了" }}
            />
            {editOpen && <EditCategories
                setList={setList}
                setEditOpen={setEditOpen}
                setLoading={setLoading}
                id={currentListId}
            />}

            {detailOpen && <DetailCategories
                detailOpen={detailOpen}
                currentData={currentData}
                setDetailOpen={setDetailOpen}
            />}
            {createOpen && <CreateCategories
                createOpen={createOpen}
                setCreateOpen={setCreateOpen}
            />}

            
        </div>

    )
}
